<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" label-width="100px">
      <WRowCol :span="4" gutter="20" :row-gutter="10">
        <el-form-item label="姓名">
          <el-input v-model="queryParams.name" clearable />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="queryParams.age" clearable />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="queryParams.sex" style="width: 100%">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="queryParams.job" clearable />
        </el-form-item>
        <el-form-item label="备注" style="grid-area: 2/1/3/5">
          <el-input v-model="queryParams.remark" clearable />
        </el-form-item>
      </WRowCol>
    </el-form>
  </div>
</template>

<script>
import WRowCol from '@/components/WComponents/WRowCol/index.vue'

export default {
  name: 'testWRowCol',
  components: { WRowCol },
  data() {
    return {
      queryParams: {}
    }
  }
}
</script>

<style scoped lang="scss"></style>
